<script type="text/javascript"><!--
var form = "";
var submitted = false;
var error = false;
var error_message = "";

function check_input(field_name, field_size, message) {
  if (form.elements[field_name] && (form.elements[field_name].type != "hidden")) {
    var field_value = form.elements[field_name].value;

    if (field_value.length < field_size) {
      error_message = error_message + "* " + message + "\n";
      error = true;
    }
  }
}

function check_radio(field_name, message) {
  var isChecked = false;

  if (form.elements[field_name] && (form.elements[field_name].type != "hidden")) {
    var radio = form.elements[field_name];

    for (var i=0; i<radio.length; i++) {
      if (radio[i].checked == true) {
        isChecked = true;
        break;
      }
    }

    if (isChecked == false) {
      error_message = error_message + "* " + message + "\n";
      error = true;
    }
  }
}

function check_form() {
  if (submitted == true) {
    alert("This form has already been submitted. Please press Ok and wait for this process to be completed.");
    return false;
  }

  error = false;
  form = document.customer_edit;
  error_message = "Errors have occured during the process of your form.\n\nPlease make the following corrections:\n\n";

  check_radio("gender", "Please select your Gender.");
  check_input("firstName", 2, "Your First Name must contain a minimum of 2 characters.");
  check_input("lastName", 2, "Your Last Name must contain a minimum of 2 characters.");
  check_input("dob", 10, "Your Date of Birth must be in this format: MM/DD/YYYY (eg 05/21/1970)");
  check_input("email", 6, "Your E-Mail Address must contain a minimum of 6 characters.");  
  check_input("telephone", 3, "Your Telephone Number must contain a minimum of 3 characters.");

  if (error == true) {
    alert(error_message);
    return false;
  } else {
    submitted = true;
	
	
	form.actionForm.value = 'submit'; 	
	form.submit();
    return true;
  }
}
//--></script>
<h1>Welcome <{$username}>'s Account Panel</h1>
<form name="customer_edit" action="<{$APPLICATION_URL}>/<{$ownerName}>MyAccount/accountEdit" method="post">
<div class="contentContainer">
  <div>
    <div class="inputRequirement" style="float: right;">* Required information</div>    
  </div>

  <div class="contentText">
    <table border="0" cellspacing="2" cellpadding="2" width="100%">
      <tbody>
	  <{if $errorMessage != ""}>
	  <div class="inputRequirement"><{$errorMessage}></div>
	  <{/if}>
	  
	  <tr>
        <td class="fieldKey">Gender:</td>
        <td class="fieldValue"><input type="radio" name="gender" value="m" <{if $gender == "m"}>checked="checked" <{/if}>>&nbsp;&nbsp;Male&nbsp;&nbsp;<input type="radio" name="gender" value="f" <{if $gender == "f"}>checked="checked" <{/if}>>&nbsp;&nbsp;Female&nbsp;<span class="inputRequirement">*</span></td>
      </tr>


      <tr>
        <td class="fieldKey">First Name:</td>
        <td class="fieldValue"><input type="text" name="firstName" value="<{$firstName}>">&nbsp;<span class="inputRequirement">*</span></td>
      </tr>
      <tr>
        <td class="fieldKey">Last Name:</td>
        <td class="fieldValue"><input type="text" name="lastName" value="<{$lastName}>">&nbsp;<span class="inputRequirement">*</span></td>
      </tr>
      <tr>
						<td class="fieldKey">Date of Birth:</td>
						<td class="fieldValue"><input type="text" name="dob" id="dob"  value="<{$birthday}>"/>&nbsp;<span
							class="inputRequirement">* (eg. 05/21/1970)</span> <script
								type="text/javascript">$('#dob').datepicker({dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, yearRange: '-100:+0'});</script>
						</td>
			</tr>
      <tr>
        <td class="fieldKey">E-Mail Address:</td>
        <td class="fieldValue"><input type="text" name="email" value="<{$email}>">&nbsp;<span class="inputRequirement">*</span></td>
      </tr>
      <tr>
        <td class="fieldKey">Telephone Number:</td>
        <td class="fieldValue"><input type="text" name="telephone" value="<{$telephone}>">&nbsp;<span class="inputRequirement">*</span></td>
      </tr>
    </tbody></table>
    <br>
    <div class="buttonSet">
      <span class="buttonAction"><span class=""><div id="tdb5" type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-primary" role="button" aria-disabled="false" onclick="return check_form();"><span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-e"></span>Save</div></span><script type="text/javascript">$("#tdb5").button({icons:{primary:"ui-icon-triangle-1-e"}}).addClass("ui-priority-primary").parent().removeClass("tdbLink");</script></span>

      <span class=""><a id="tdb6" href="<{$APPLICATION_URL}>/<{$ownerName}>MyAccount" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-secondary" role="button"><span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-w"></span>Back</a></span><script type="text/javascript">$("#tdb6").button({icons:{primary:"ui-icon-triangle-1-w"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>    </div>
  </div>
</div>
<input type="hidden" id="actionForm" name="actionForm" value=""/>
</form>